<template>
  <div id="app">
    normal:
    <x-button>default</x-button>
    <x-button type="primary">
      primary
    </x-button>
    <x-button type="success">
      success
    </x-button>
    <x-button type="warn">
      warn
    </x-button>
    <x-button type="error">
      error
    </x-button>
    <x-button type="text">
      text
    </x-button>
    <x-button disabled>
      disable
    </x-button>
    <hr>
    hollow:
    <x-button>default</x-button>
    <x-button
      type="primary"
      hollow
    >
      primary
    </x-button>
    <x-button
      type="success"
      hollow
    >
      success
    </x-button>
    <x-button
      type="warn"
      hollow
    >
      warn
    </x-button>
    <x-button
      type="error"
      hollow
    >
      error
    </x-button>
    <x-button
      type="text"
      disabled
    >
      text
    </x-button>
    <x-button disabled>
      disable
    </x-button>
    <hr>
    Loading:
    <x-button
      loading
      disabled
    >
      Loading
    </x-button>
    <hr>
    Icon:
    <x-button icon="earth">
      Icon
    </x-button>
    <x-button icon="earth">
    </x-button>
    <hr>
    Cirle:
    <x-button
      circle
      icon="earth"
    >
    </x-button>
    <x-button
      circle
      hollow
      icon="earth"
    >
    </x-button>
    <x-button
      circle
      hollow
      icon="earth"
      type="error"
    >
    </x-button>
    <x-button
      circle
      icon="earth"
      type="success"
    >
    </x-button>
    <x-button
      circle
      icon="earth"
      type="warn"
    >
      circle
    </x-button>
    <hr>
    Size:
    <x-button size="smaller">
      smaller
    </x-button>
    <x-button size="small">
      small
    </x-button>
    <x-button>
      base
    </x-button>
    <x-button size="large">
      base
    </x-button>
    <br>
    Size:
    <x-button
      size="smaller"
      circle
    >
      smaller
    </x-button>
    <x-button
      size="small"
      circle
    >
      small
    </x-button>
    <x-button circle>
      base
    </x-button>
    <x-button
      size="large"
      circle
    >
      base
    </x-button>
    <br>
    Size Icon:
    <x-button
      size="smaller"
      circle
      icon="earth"
    >
    </x-button>
    <x-button
      size="small"
      circle
      icon="earth"
    >
    </x-button>
    <x-button
      circle
      icon="earth"
    >
    </x-button>
    <x-button
      size="large"
      circle
      icon="earth"
    >
    </x-button>
    <hr>
    <x-tag></x-tag>
    <x-tag color="success">
      good
    </x-tag>
    <x-tag color="warn"></x-tag>
    <x-tag color="primary"></x-tag>
    <x-tag color="info"></x-tag>
    <x-tag color="error"></x-tag>
    <x-tag color="disabled"></x-tag>
    <hr>固钉
    <x-affix />
    <x-affix :offset-top="70">
      我是一个固定
    </x-affix>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
</style>
